<template>
<div class="code404">
	<el-space
		fill
		wrap
		:fill-ratio="30"
		direction="vertical"
		style="width: 100%"
	>
		<div style="font-size: xx-large">您输入了错误的网址或者刷新了页面，{{ five }}秒后转到用户主页</div>
		<br>
		<el-button @click="jump" round size="large">立即跳转</el-button>
	</el-space>
</div>
</template>

<script>
export default {
	name: "404"
}
</script>

<script setup>
import {useRouter} from "vue-router";
import {onMounted, onUnmounted, reactive, ref} from "vue";
const router = useRouter()
const state = reactive({
	timeInter: null, //定义定时器
	countDown: null, // 倒计时定时器
})
const five = ref(5)
const jump = () => {
	router.push({
		name: 'index'
	})
}
onMounted(() => {
	state.timeInter = setTimeout(() => {
		router.push({
			name: 'index'
		})
	}, 5000)
	state.countDown = setInterval(() => {
		five.value = five.value - 1
	}, 1000)
})
onUnmounted(() => {
	clearTimeout(state.timeInter) //销毁
	clearInterval(state.countDown) //销毁
	state.timeInter = null
	state.countDown = null
})
</script>

<style scoped>
.code404 {
	padding: 50px 10px;
	margin: 100px 350px 0;
	background-color: lightgrey;
	border: black solid 5px;
}
</style>